import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Form, Select, Input } from 'antd'
import style from '../FormCourt.module.less'
import Text from '@components/Text'
import { Line, Cell, Split } from '@components/ApprovePre/Approve'
import { defaultProcedure } from '@src/assets/js/config'

const { Item } = Form
const { Option } = Select

const noValueTypes = ['未选定', '委托主任指定']

class ArbitratorSelector extends Component {
  state = {
    arbType: '未选定'
  }

  changeArbType (v) {
    this.setState({
      arbType: v
    }, () => {
      const current = this.props.formRef.current
      this.props.onChange(noValueTypes.indexOf(v) !== -1 ? v : '')
      if (noValueTypes.indexOf(v) !== -1) {
        current.validateFields([this.props.namePath])
      }
      if (noValueTypes.indexOf(v) === -1) {
        const idPath = this.props.idPath
        const fp = idPath[0]
        const root = current.getFieldValue(fp)
        root[idPath[1]][idPath[2]] = ''
        current.setFieldsValue({
          [fp]: root
        })
      } else {
        this.props.onClick(false)
        setTimeout(() => {
          this.props.unSelect({ arbitrator: v, arbitratorid: '' })
        }, 0)
      }
    })
  }

  // 格式化仲裁员选择类型
  formatType () {
    this.setState({
      arbType: noValueTypes.indexOf(this.props.value) === -1 ? '选定' : this.props.value
    })
  }

  componentDidUpdate (prev) {
    if (prev.value !== this.props.value) {
      this.formatType()
      if (noValueTypes.indexOf(this.props.value) !== -1) {
        setTimeout(() => {
          this.props.formRef.current.validateFields([this.props.namePath])
        }, 0)
      }
    }
  }

  componentDidMount () {
    this.formatType()
  }

  render () {
    return (
      <div className={style['arbitrator-block']}>
        <div className={style['arbitrator-block-cell']}>
          <Select value={this.state.arbType} onChange={v => this.changeArbType(v)}>
            <Option key='未选定'>未选定</Option>
            <Option key='委托主任指定'>委托主任指定</Option>
            <Option key='选定'>选定</Option>
          </Select>
        </div>
        <div className={style['arbitrator-block-cell']}>
          <Item noStyle>
            {
              noValueTypes.indexOf(this.state.arbType) === -1 ? (
                <Input value={this.props.value} placeholder='请选择仲裁员' readOnly onClick={() => this.props.onClick()} />
              ) : <span />
            }
          </Item>
        </div>
      </div>
    )
  }
}

ArbitratorSelector.proptypes = {
  value: PropTypes.string,
  onChange: PropTypes.func,
  onClick: PropTypes.func,
  formRef: PropTypes.object,
  idPath: PropTypes.array,
  namePath: PropTypes.array,
  unSelect: PropTypes.func
}

ArbitratorSelector.defaultProps = {
  value: '',
  onChange: (v) => {},
  onClick: (v) => {},
  formRef: {},
  idPath: [],
  namePath: [],
  unSelect: () => {}
}

export default class FormCourtArbitratorLine extends Component {
  renderArbitrator () {
    const { field, formRef, paramName } = this.props
    const basePath = [paramName, field.name]
    if (this.props.caseDetail.procedure === defaultProcedure) {
      return (
        <Cell>
          <Item name={[field.name, 'arbitratorid1']} noStyle><span /></Item>
          <Item label='仲裁员' name={[field.name, 'arbitrator1']} validateTrigger='onSubmit' rules={[{ required: true, message: '仲裁员不能为空' }]}>
            <ArbitratorSelector formRef={formRef} idPath={[...basePath, 'arbitratorid1']} namePath={[...basePath, 'arbitrator1']} onClick={(show = true) => this.props.setModifyArbitrator(formRef, [...basePath, 'arbitrator1'], [...basePath, 'arbitratorid1'], show, this.props.paramName)} unSelect={o => this.props.unSelect(o)} />
          </Item>
        </Cell>
      )
    }
  }

  render () {
    const { field, formRef, paramName } = this.props
    const basePath = [paramName, field.name]
    const isNormal = this.props.caseDetail.procedure === defaultProcedure
    return (
      <div>
        <Item noStyle name={[field.name, 'id']}><span /></Item>
        <Item noStyle name={[field.name, 'partyid']}><span /></Item>
        <Line>
          <Cell>
            <span>姓名/名称：</span>
            <Item noStyle name={[field.name, 'party_name']}><Text /></Item>
          </Cell>
          <Split />
          <Cell>
            <Item name={[field.name, 'arbitratorid']} noStyle><span /></Item>
            <Item label={isNormal ? '首席仲裁员' : '仲裁员'} name={[field.name, 'arbitrator']} validateTrigger='onSubmit' rules={[{ required: true, message: '仲裁员不能为空' }]}>
              <ArbitratorSelector formRef={formRef} idPath={[...basePath, 'arbitratorid']} namePath={[...basePath, 'arbitrator']} onClick={(show = true) => this.props.setModifyArbitrator(formRef, [...basePath, 'arbitrator'], [...basePath, 'arbitratorid'], show, this.props.paramName)} unSelect={o => this.props.unSelect(o)} />
            </Item>
          </Cell>
          <Split />
          {this.renderArbitrator()}
        </Line>
      </div>
    )
  }
}

FormCourtArbitratorLine.proptypes = {
  paramName: PropTypes.string,
  field: PropTypes.object,
  formRef: PropTypes.object,
  setModifyArbitrator: PropTypes.func,
  unSelect: PropTypes.func,
  caseDetail: PropTypes.object
}

FormCourtArbitratorLine.defaultProps = {
  paramName: '',
  field: {},
  formRef: null,
  setModifyArbitrator: () => {},
  unSelect: () => {},
  caseDetail: {}
}
